<template>
  <div class="box">
    <h2>欢迎登录</h2>
    <!-- form表单 -->
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <!-- 用户名 -->
      <!-- prop:用于绑定验证规则 -->
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="请输入用户名">
          <template #prefix>
            <el-icon class="el-input__icon">
              <svg-icon name="user" color="rgb(146,149,157)" />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          show-password
          placeholder="请输入密码"
        >
          <template #prefix>
            <el-icon class="el-input__icon">
              <svg-icon name="lock" color="rgb(146,149,157)" />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

import request from "@/network/request";

import {useUserStore} from "@/stores/user";
let $useUserStore=useUserStore();

import {useRouter} from "vue-router"
// 实例化全局路由对象
let $router=useRouter();

// 自定义的类型约束
interface RuleForm {
  username: string;
  password: string;
}

const formSize = ref("default");
// 表单的ref属性绑定元素，获取元素的响应式数据
const ruleFormRef = ref<FormInstance>();
// 用于存放用于信息，和input框形成数据双向绑定
const ruleForm = reactive<RuleForm>({
  username: "",
  password: "",
});

// 表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  // 用户名的验证规则
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 5, message: "用户名的长度在3-5个字符之间", trigger: "blur" },
    {
      pattern: /^[a-z]\d{2,4}$/i,
      message: "用户名必须以字母开头",
      trigger: "blur",
    },
  ],
  //密码的验证规则
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { len: 6, message: "密码的长度是6个字符", trigger: "blur" },
  ],
});

// 登录点击事件的事件处理函数
const submitForm = async (formEl: FormInstance | undefined) => {
// 如果ruleFormRef为空
  if (!formEl) return;
  console.log(formEl);
//   如果ruleFormRef不为空
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("验证通过!");
    //   拿到用户输入的用户名和密码，与数据库里面的用户信息进行匹配，匹配成功就登录，失败就告知
    // 1.使用axios调用服务端接口
    $useUserStore.loginFn(ruleForm).then(res=>{
      alert("登录成功！");
      // 跳转到系统首页
      $router.push("/home");
    });
    // 2.服务端连接数据库
    // 3.数据库把数据返回给服务端
    // 4.服务端把数据返回给前端



    } else {
      console.log("验证失败!", fields);
    }
  });
};




</script>

<style scoped lang="scss">
.box {
  width: 300px;
  height: 300px;
  background-color: aqua;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  .el-form {
    margin: 20px 0;
    button {
      width: 100%;
    }
  }
}
</style>
